<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>免签/落地签</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/common.css" />
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			.mui-content {
				width: 100%;
			}
			.many-time-container {
				width: 100%;
				background-color: #FFFFFF;
				padding: 10px 0px 15px 0px;
				text-align: -webkit-center;
			}
			.top-nav-container {
				width: 100%;
				text-align: left;
			}
			.top-back-div {
				height: 35px;
				width: 45px;
			}
			.top-back-div img {
				width: 25px;
				height: 25px;
				margin-left: 10px;
				margin-top: 5px;
				transform:rotate(90deg);
			}
			.visa-type-img {
				width: 100px;
				height: 100px;
				border-radius: 50px;
			}
			.visa-type-title {
				font-size: 14px;
				color: #919090;
				margin-top: 10px;
			}
			.visa-type-tips {
				font-size: 12px;
				color: #919090;
				margin-top: 10px;
			}
			.ul-goods {
				width: 100%;
			}
			.li-goods {
				margin: 10px 5px 0px 5px;
				text-align: center;
				border-radius: 4px;
				background-color: #FFFFFF;
			}
			.goods-img-div {
				position: relative;
			}
			.country-img {
				width: 34px;
				height: 22px;
				vertical-align: sub;
			}
			.shadow-div {
				width: 100%;
				height: 120px;
				position: absolute;
				left: 0;
				top: 0;
				background-color: #000000;
				opacity: 0.3;
			}
			.goods-img {
				width: 100%;
				height: 120px;
			}
			.goods-name {
				font-size: 14px;
				color: #919090;
				padding: 5px;
				margin: 0px 10px;
				text-align: left;
			}
			.country-container {
				position: absolute;
				left: 10px;
				bottom: 10px;
			}
			.country {
				font-size: 18px;
				color: #FFFFFF;
				font-family: "PingFang-SC-Regular";
			}
			.visa-type-span {
				margin-left: 10px;
				font-size: 13px;
				color: #FFFFFF;
				padding: 0px 3px;
				border: 1px solid #FFFFFF;
				font-family: "PingFang-SC-Regular";
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="many-time-container">
				<div class="top-nav-container">
					<div class="top-back-div">
						<img src="../img/detail/down_icon.png" />
					</div>
				</div>
				<img class="visa-type-img" src="../img/index/luodi_image.png" />
				<div class="visa-type-title">免签/落地签目的地清单</div>
				<div class="visa-type-tips">已收录<span id="bournText"></span>个目的地</div>
			</div>
			<div class="ul-goods">
				<!--<div class="li-goods">
					<div class="goods-img-div">
						<img class="goods-img" src="../img/index/shuijiao.jpg" />
						<div class="country-container">
							<span class="country">韩国</span>
							<span class="visa-type-span">免签</span>
						</div>
					</div>
					<div class="goods-name">【全国受理】英国旅游签-两年多次</div>
				</div>-->
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/spin.min.js" ></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script type="text/javascript">
		var customerId = base.getParameter("customerId");
		$(function() {
			base.setWait("正在获取数据...");
			base.postData(base.url.getGoodsByGoodsType, {goodsType: 2}, getGoodsByGoodsTypeSuccess)
		})
		function getGoodsByGoodsTypeSuccess(data) {
			if (data.success) {
				var list = data.extendData.goodsList;
				$("#bournText").text(list.length);
				var html = '';
				for(var index in list) {
					html+=getGoodsItemHtml(list[index]);
				}
				$(".ul-goods").html(html);
			} else {
				mui.toast(data.message);
			}
		}
		function getGoodsItemHtml(item) {
			var html = '';
			html+='<div class="li-goods">'
			html+='	<div class="goods-img-div">'
			html+='		<img class="goods-img" src="'+item.flagImg+'" />'
			html+='		<div class="shadow-div"></div>'
			html+='		<div class="country-container">'
			html+='			<img class="country-img" src="'+item.countryImg+'" />'
			html+='			<span class="country">'+item.countryName+'</span>'
			html+='			<span class="visa-type-span">'+item.goodsType+'</span>'
			html+='		</div>'
			html+='	</div>'
			html+='	<div class="goods-name">'+item.describeStrategy+'</div>'
			html+='</div>'
			return html;
		}
	</script>
</html>